<template>
    <view class="page">
        <view class="page-head-img">
            <img :src="File_Url+'authentication-bg.png'" mode="widthFix" />
        </view>
        <view class="page-list">
			<!-- 个人认证 -->
            <view class="page-list-item">
                <view class="list-item-left">
                    <img :src="File_Url+'person-icon.png'" />
                    <text>个人认证</text>
                </view>
                <view class="list-item-right" v-if="userInfo.personal_auth_status==-1" @click="skipAuthenticationItem(0)">
                    <view>去认证</view>
                </view>
				<!-- 认证中 -->
				<template v-else-if="userInfo.personal_auth_status == 0" >
					<view class="list-item-status">{{userInfo.personal_auth_status_name}}</view>
					<view class="list-item-right " >
					    <view class="item-disable">审核中</view>
						<view class="list-item-new-status">{{userInfo.new_personal_auth_status_name}}</view>
					</view>
				</template>
				<!-- 认证中end -->
				
                <template v-else>
                	<view class="list-item-status">{{userInfo.personal_auth_status_name}}</view>
                	<view class="list-item-right"  @click="userInfo.new_personal_auth_status!=0 &&skipAuthenticationItem(0)">
						<view  :class="userInfo.new_personal_auth_status==0?'btn-disable':''">更新认证</view>
                	    <view class="list-item-new-status">{{userInfo.new_personal_auth_status_name}}</view>
                	</view>
                </template>
            </view>
			<!-- 个人认证end -->
			
			<!-- 单位认证 -->
<!--            <view class="page-list-item" >-->
<!--                <view class="list-item-left">-->
<!--                    <img :src="File_Url+'company-icon.png'" />-->
<!--                    <text>单位认证</text>-->
<!--                </view>-->
<!--                <view class="list-item-right" v-if="userInfo.unit_auth_status == -1" @click="skipAuthenticationItem(1)">-->
<!--                    <view>去认证</view>-->
<!--                </view>-->
<!--				&lt;!&ndash; 认证中 &ndash;&gt;-->
<!--				<template v-else-if="userInfo.unit_auth_status == 0" >-->
<!--					<view class="list-item-status">{{userInfo.unit_auth_status_name}}</view>-->
<!--					<view class="list-item-right item-disable" >-->
<!--					    <view>去认证</view>-->
<!--						<view class="list-item-new-status">{{userInfo.new_unit_auth_status_name}}</view>-->
<!--					</view>-->
<!--				</template>-->
<!--				&lt;!&ndash; 认证中end &ndash;&gt;-->

<!--				<template v-else>-->
<!--					<view class="list-item-status">{{userInfo.unit_auth_status_name}}</view>-->
<!--					<view class="list-item-right"  @click="userInfo.new_unit_auth_status!=0 &&skipAuthenticationItem(1)">-->
<!--						<view :class="userInfo.new_unit_auth_status==0?'btn-disable':''">更新认证</view>-->
<!--					    <view class="list-item-new-status">{{userInfo.new_unit_auth_status_name}}</view>-->
<!--					</view>-->
<!--				</template>-->
<!--            </view>-->
			<!-- 单位认证end -->
			
			<!-- 专家认证 -->
            <view class="page-list-item">
                <view class="list-item-left">
                    <img :src="File_Url+'expert-icon.png'" />
                    <text>专家认证</text>
                </view>
                <view class="list-item-right" v-if="userInfo.expert_auth_status == -1" @click="skipAuthenticationItem(2)">
                    <view>去认证</view>
                </view>
                <!-- 认证中 -->
                <template v-else-if="userInfo.expert_auth_status == 0" >
                	<view class="list-item-status">{{userInfo.expert_auth_status_name}}</view>
                	<view class="list-item-right" >
                	    <view class="item-disable">审核中</view>
                		<view class="list-item-new-status">{{userInfo.new_expert_auth_status_name}}</view>
                	</view>
                </template>
                <!-- 认证中end -->
                
                <template v-else>
                	<view class="list-item-status">{{userInfo.expert_auth_status_name}}</view>
                	<view class="list-item-right"  @click="userInfo.new_expert_auth_status!=0 &&skipAuthenticationItem(2)">
                		<view :class="userInfo.new_expert_auth_status==0?'btn-disable':''">更新认证</view>
                	    <view class="list-item-new-status">{{userInfo.new_expert_auth_status_name}}</view>
                	</view>
                </template>
            </view>
			<!-- 专家认证end -->
        </view>
        <view class="page-tips">
            <text @click="skipAuthenticateRule">认证规则及权益</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "Authentication",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                userInfo:{},
            }
        },
        onShow(){
          this.getUserInfo();
        },
        methods:{
            //获取个人信息
            async getUserInfo(){
                let userToken=uni.getStorageSync('userToken')
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.userInfo=res.data.data.user_info
                }
            },
            //跳转认证规则
            skipAuthenticateRule(){
                uni.navigateTo({
                    url: '/pages/Authentication/AuthenticateRule/AuthenticateRule'
                })
            },
            //跳转认证页面
            skipAuthenticationItem(id){
                switch (id) {
                    case 0 :
                        uni.navigateTo({
                            url: '/pages/Authentication/personAuth/personAuth'
                        })
                        break;
                    case 1 :
                        uni.navigateTo({
                            url: '/pages/Authentication/companyAuth/companyAuth'
                        })
                        break;
                    case 2 :
                        uni.navigateTo({
                            url: '/pages/Authentication/expertAuth/expertAuth'
                        })
                        break;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: 100vh;
    }
    .page-head-img{
        width: 100vw;
        img{
            width: 100vw;
        }
    }
    .page-list{
        padding: 24rpx 30rpx;
        .page-list-item{
            padding: 36rpx 30rpx;
            background: #FFFFFF;
            border-radius: 8rpx;
            margin-bottom: 20rpx;
            box-shadow: 0 10rpx 20rpx 0 rgba(0, 0, 0, 0.1);
            @include flex(flex-start);
            flex-direction: row;
            .list-item-left{
                @include flex(flex-start);
                flex-direction: row;
                img{
                    height: 48rpx;
                    width: 48rpx;
                    margin-right: 10rpx;
                }
                text{
                    height: 48rpx;
                    line-height: 48rpx;
                    font-size: 32rpx;
                }
            }
			.list-item-status{
				margin-left:40rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: gray;
				font-size: 24rpx;
			}
			.list-item-new-status{
				text-align: center;
				color: gray !important;
				background:none !important;
				height: auto !important;
				margin-top:10rpx;
			}
			.item-disable{
				background:gray !important;
			}
			.btn-disable{
				background: gray !important;
			}
            .list-item-right{
                margin-left: auto;
                &>view{
					height: 40rpx;
					line-height: 40rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					background: #3782FF;
					padding: 0 24rpx;
					border-radius: 29rpx;
				}
            }
        }
        .page-list-item:last-child{
            margin-bottom: 0;
        }
    }
    .page-tips{
        padding: 24rpx 0;
        @include flex();
        flex-direction: column;
        text{
            height: 33rpx;
            line-height: 33rpx;
            font-size: 24rpx;
            color: #999999;
        }
    }
</style>